<template>
  <div class="main">
    <h2 class="main-index">实验三</h2>
    <p class="main-title">二阶系统的单位脉冲响应</p>
    <!-- <p class="sub-title">设一阶系统的传递函数为</p> -->
    <img class="formula" src="../assets/img/31.png" />
    <p class="sub-title"><span class="top">ω</span><span class="bottom">n</span> - 无阻尼固有频率<span style="margin-left:10vw" class="top">ζ</span> - 阻尼比</p>
    <p class="sub-title"></p>
    <div class="line-box">
      <p v-for="(item, index) in TArr" :key="index">
        <span>ω:{{item}}</span>
        <span>ζ:{{xigaArr[index]}}</span>
        <span :style="{'background':colorArr[index]}"></span>
      </p>
    </div>
    <div id="mapbox" ref="mapbox"></div>
    <van-field style="margin-bottom: 0.1rem" v-model="TNumber" type="number" center clearable placeholder="请输入无阻尼固有频率">
      <template #label>
        <p class="sub-title"><span class="top">ω</span><span class="bottom">n</span></p>
      </template>
    </van-field>
    <van-field style="margin-bottom: 0.2rem" v-model="xiga" type="number" center clearable placeholder="请输入阻尼比">
      <template #label>
        <p class="sub-title"><span class="top">ζ</span></p>
      </template>
    </van-field>
    <div class="btn-box">
      <a href="javascript:;" @click="submit" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">提交</a>
      <a href="javascript:;" @click="showHelp" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">帮助</a>
      <a href="javascript:;" @click="run" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">仿真</a>
      <a href="javascript:;" @click="clearData" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">清除</a>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { Toast } from 'vant'
import { colorArr } from '../utils/config'
export default {
  name: "onePage",
  data() {
    return {
      TNumber: 1, // w输入值
      TArr: [], // 已提交的w值集合
      xiga: 1, // ζ输入值
      xigaArr: [], // 已提交的ζ值集合
      colorArr,
      myChart: null,
      option: null,
      yAxisType: 'category',
      yAxisArr: [-1, -0.5, 0, 0.5, 1],
      xAxisArr: [0, 3, 6, 9, 12],
      seriesArr: [] // 计算后的值集合
    };
  },
  methods: {
    initChart() {
      // const tArr = [0.1];
      // const xAxisArr = [0, 0.1, 0.2, 0.3, 0.4];
      // const yAxisArr = [0, 2.5, 5, 7.5, 10];
      // const seriesArr = [];
      // const yAxisType = "category";
      const normalFontSize = 15;
      this.myChart = this.$echarts.init(document.getElementById("mapbox"));
      this.option = {
        title: {
          text: "",
        },
        tooltip: {},
        xAxis: {
          type: this.yAxisType,
          name: "{a|ω}{b|n}{c|t}",
          // max: 12,
          // min: 0,
          nameTextStyle: {
            fontSize: normalFontSize,
            rich: {
              a: {
                fontSize: 18
              },
              b:{
                fontSize: 10,
                verticalAlign: 'bottom'
              },
              c:{
                fontSize: 16,
                verticalAlign: 'bottom'
              }
            }
          },
          // splitNumber: 3,
          nameLocation: 'center',
          nameGap: '25',
          boundaryGap: false,
          data: this.xAxisArr,
          axisLabel: {
            show: true,
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        yAxis: {
          name: "{a|w(t)/ω}{b|n}",
          type: this.yAxisType,
          show: true,
          max: 1.5,
          min: -1,
          nameTextStyle: {
            fontSize: normalFontSize,
            formatter: '{a|w(t)/ω}{b|n}',
            rich: {
              a: {
                fontSize: 18
              },
              b:{
                fontSize: 10,
                verticalAlign: 'bottom'
              }
            }
          },
          boundaryGap: false,
          data: this.yAxisArr,
          axisLabel: {
            show: true,
            fontSize: normalFontSize,
            // formatter: '{value}'
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        series: this.seriesArr
      }
      this.myChart.setOption(this.option);
    },
    showHelp() {
      this.$weui.alert('<p>1.本实验对二阶系统的单位脉冲响应进行仿真;</p><p>2.用户可以改变仿真系统的固有频率和阻尼比;</p><p>3.用户在同一实验中按“提交”按钮可以输入多个不同系统的固有频率和阻尼比，用户最多可更改参数的次数为5次;</p><p>4.用户按“仿真”按钮，系统进行仿真;</p><p>5.按“清除”按钮清除参数和仿真结果，可以重新输入参数和仿真。</p>',{
          title: '帮助',
          className: 'help',
          buttons: [{
              label: '确定',
              type: 'primary',
              onClick: function(){ console.log('ok') }
          }]
      })
    },
    submit() {
      if(this.seriesArr.length) {
        Toast.fail('请先点击清除按钮')
        return
      }
      if(this.TArr.length >= 5) {
        return
      }
      if(!this.TNumber || this.TNumber<=0) {
        Toast.fail('固有频率值不合法')
        return
      }
      if(!this.xiga || this.xiga<0) {
        Toast.fail('阻尼比值不合法')
        return
      }
      this.TArr.push(Number(this.TNumber))
      this.xigaArr.push(Number(this.xiga))
    },
    clearData() {
      this.TNumber = 1
      this.TArr = []
      this.xiga = 1
      this.xigaArr = []
      // this.myChart = null
      // this.option = null
      this.yAxisType = 'category'
      this.yAxisArr = [-1, -0.5, 0, 0.5, 1]
      this.xAxisArr = [0, 3, 6, 9, 12]
      this.seriesArr = []
      this.$echarts.init(this.$refs.mapbox).dispose()
      this.$nextTick(() => {
        this.initChart()
      })
    },
    drawLine(i) {
	//i=9;
      let that = this;
	
	var wnt = 0;
  let kt = 0;
  let kth = this.xigaArr;
  let y = 0;

  let wn = this.TArr;
  let yArr = [];
	
		
		if (kth[i] > 0 && kth[i] < 1) {
			kt = Math.sqrt(1 - kth[i] * kth[i]);
			y = 1 / kt * Math.exp(-kth[i] * wnt) * Math.sin(kt * wnt);
		}
		if (kth[i] == 0) {
			y = Math.sin(wnt);
		}
		if (kth[i] == 1) {
			y = wnt * Math.exp(-wnt);
		}
		if (kth[i] > 1) {
			kt = Math.sqrt(kth[i] * kth[i] - 1);
			y = 0.5 / kt * (Math.exp(-(kth[i] - kt) * wnt) - Math.exp(-(kth[i] + kt) * wnt));
		}
	
		while (wnt <= 14) {
			wnt = wnt + 12 * 0.025 / 8;
			if (kth[i] > 0 && kth[i] < 1) {
				kt = Math.sqrt(1 - kth[i] * kth[i]);
				y = 1 / kt * Math.exp(-kth[i] * wnt) * Math.sin(kt * wnt);
			}
			if (kth[i] == 0) {
				y = Math.sin(wnt);
			}
			if (kth[i] == 1) {
				y = wnt * Math.exp(-wnt);
			}
			if (kth[i] > 1) {
				kt = Math.sqrt(kth[i] * kth[i] - 1);
				y = 0.5 / kt * (Math.exp(-(kth[i] - kt) * wnt) - Math.exp(-(kth[i] + kt) * wnt));
			}
      yArr.push([wnt,y])
      console.log(wnt,y)
			
		}
    that.seriesArr.push({
          data: yArr,
          type: "line",
          smooth: true,
          showSymbol: false,
          lineStyle: {
            color: that.colorArr[i],
          }
        })
	
		
	
},
    run() {
      const that = this
      if(this.seriesArr.length) {
        Toast.fail('请先点击清除按钮')
        return
      }
      if(this.TArr.length < 1) {
        Toast.fail('请先提交T值')
        return
      }

      for (let jk = 0; jk < that.TArr.length; jk = jk + 1) {
			that.drawLine(jk);
		}

      // const xArr = []
      // for(let i=0;i<121;i++){
      //   xArr.push(i/10)
      // }
      // // 计算每个T值的线条数据
      // this.TArr.forEach((item, index) => {
      //   const xigaValue = that.xigaArr[index]
      //   let lineData = []
      //   if(xigaValue === 0) {
      //     xArr.forEach((child) => {
      //       lineData.push([item * child, item * Math.sin(item * child) ])
      //     })
      //   } else if(xigaValue>0 && xigaValue<1) {
      //     const wd = item * Math.sqrt(1 - Math.pow(that.xigaArr[index], 2))
      //     xArr.forEach((child) => {
      //       lineData.push([item*child, ((item / Math.sqrt(1 - Math.pow(xigaValue, 2))) * Math.pow(Math.E, -xigaValue*item*child) * Math.sin(wd*child)) / item])
      //     })
      //   } else if(xigaValue === 1) {
      //     xArr.forEach((child) => {
      //       lineData.push([item*child, Math.pow(item, 2) * child * Math.pow(Math.E, -item*child) / item]) 
      //     })
      //   } else {
      //     xArr.forEach((child) => {
      //       const s1 = - (xigaValue + Math.sqrt(Math.pow(xigaValue, 2) - 1)) * item
      //       const s2 = - (xigaValue - Math.sqrt(Math.pow(xigaValue, 2) - 1)) * item
      //       lineData.push([item*child, (item / (2 * Math.sqrt(Math.pow(xigaValue, 2) - 1))) * (Math.pow(Math.E, s2*child) - Math.pow(Math.E, s1*child)) / item]) 
      //     })
      //   }
      //   that.seriesArr.push({
      //     data: lineData,
      //     type: "line",
      //     smooth: true,
      //     showSymbol: false,
      //     lineStyle: {
      //       color: that.colorArr[index],
      //     }
      //   })
      // })

      this.yAxisType = 'value'
      console.log(this.option)
      this.$echarts.init(this.$refs.mapbox).dispose()
      // this.myChart.dispose()
      // this.myChart.setOption(this.option)
      this.$nextTick(() => {
        this.initChart()
      })
    }
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style scoped>
.formula{
  height: auto;
  width: 100%;
  margin-bottom: 5px;
}
.line-box p{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.line-box p span:first-child, .line-box p span:nth-child(2){
  color: #333;
  width: 12vw;
  overflow: hidden;
  line-height: 0.4rem;
  font-size: 0.45rem;
  margin-right: 12px;
}
.line-box p span:last-child{
  width: 10vw;
  height: 4px;
  display: inline-block;
}
</style>